<template>
	<view class="map-box">
		<map class="amap" :latitude="center[1]" :longitude="center[0]" :polygon="polygons">
		</map>
		<view class="area-panel">
			<span class="text">覆盖面积</span>
			<span class="number">{{area}}</span>
			<span class="text">㎡</span>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: {
				type: Number,
				default: 0
			}, // myList中的record_id
			center: {
				type: Array,
				default: [119.9774, 30.54251]
			},
			area: {
				type: String || Number,
				default: 0
			},
			polygons: {
				type: Array,
				default: [{
					// strokeColor: '#ff33ff80',
					strokeColor: "#FF33FF",
					strokeOpacity: 0.5,
					strokeWeight: 6,
					fillColor: '#1791fc80',
					points: [{
							latitude: "23.08288402644847",
							longitude: "113.30218549997039"
						},
						{
							latitude: "23.085168159298544",
							longitude: "113.33830101347007"
						},
						{
							latitude: "23.046124888637255",
							longitude: "113.34326689639329"
						},
						{
							latitude: "23.04654030072217",
							longitude: "113.28683640541976"
						},
						{
							latitude: "23.081845770334308",
							longitude: "113.28299913608771"
						},
						{
							latitude: "23.083506975476055",
							longitude: "113.30286266433609"
						},
						{
							latitude: "23.08288402644847",
							longitude: "113.30218549997039"
						}
					]
				}]
			} //转发人员弹窗
		},
		data() {
			return {
				src: '',
				src2: 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/Screenshot_2021-08-09-08-55-04-49_ca6ee20236ea15ad01663c6ea4ca0bdbjpg20210822201626064.jpeg',
				map: null,
				latitude: 30.520662,
				longitude: 119.982903
			}
		},
		computed: {
			// polygon() {
			// 	return this.polygons.slice(0)
			// }
		},
		methods: {},
		mounted() {
			// this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.map-box {
		width: 100%;
		height: 100%;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.area-panel {
			position: absolute;
			right: 0;
			bottom: 0;
			box-shadow: 0 0 8rpx #c5c5c5;
			background-color: #ffffff;
			border-radius: 2vw;
			padding: 0 4rpx;
			.number {
				font-size: 32rpx;
				margin: 0 8rpx;
				color: #3D93FD;
				font-weight: bold;
			}
		}

		.amap {
			width: 100%;
			height: 100%;
		}
	}
</style>
